import React, { Component } from "react";
import headercss from "./index.module.css";
import axiox from "axios";
import PubSub from "pubsub-js";

export default class Header extends Component {
  // 声明ref绑定input框
  inputEle = React.createRef();
  // 搜索
  searchUsers = async () => {
    // 获取输入框的值
    const nameVal = this.inputEle.current.value;
    if (!nameVal) {
      alert("姓名不允许为空");
      return;
    }
    //#region axios 发送请求
    // axiox.get(`/api1/search/users?q=${nameVal}`).then(res => {
    //   /**
    //    * 发布消息，传递请求到的人员信息
    //    * 发布消息时调用 PubSub.publish() 方法，这个方法传递两个参数
    //    *  users:发布的消息名称，可以是任何字符串，订阅消息时要和这个名字一致才能接收到消息
    //    *  第二个参数就是要发布的数据
    //    */
    //   PubSub.publish('users', res.data.items)
    // })
    //#endregion

    //#region  fetch 发送请求 (未优化)
    /*
      fetch(`/api1/search/users?q=${nameVal}`).then(res => {
        // fetch 第一次返回的并不是服务器返回的数据，而是请求到的状态信息，用来告知我们这个请求是否发送成功
        // 使用结果上自带的 json 方法转成 promise 对象返回出去，交给第二个 then 去处理
        return res.json()
      }).then(res => {
        // 第二次 then 拿到的才是服务器返回的数据
        PubSub.publish('users', res.items)
      }).catch(err => {
        // 使用 catch 来处理上述两步骤中可能出现的错误
        alert(JSON.stringify(err))
      })
     */
    //#endregion

    // fetch 发送请求 (优化后)
    try {
      const response = await fetch(`/api1/search/users?q=${nameVal}`);
      const result = await response.json();
      PubSub.publish("users", result.items);
    } catch (error) {
      // 使用 try catch 来处理 await 错误
      alert(JSON.stringify(error));
    }
  };

  render() {
    return (
      <div className={headercss.main}>
        <div className={headercss.searchbox}>
          <h3>Search Gitee Users</h3>
          <div className={headercss.inputbox}>
            <input ref={this.inputEle} type="text" placeholder="请搜索" />
            <button onClick={this.searchUsers}>点击搜索</button>
          </div>
        </div>
      </div>
    );
  }
}
